{% extends 'base.html' %}
{% load humanize %}
{% load pagination_tags %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}
{% load bootstrap %}
{% load custom_tag %}
<link href="/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">

<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>费用信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">未启用 1</a>
                            </li>
                            <li><a href="#">未启用 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">

                    {% if error %}
                        <div class="alert alert-warning text-center">{{ error }}</div>
                    {% endif %}
                    {% if msg %}
                        <div class="alert alert-success text-center">{{ msg }}</div>
                    {% endif %}
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                          <thead>
                            <th class="text-center">项目</th>
                            <th class="text-center">公网IP</th>
                            <th class="text-center">内网IP</th>
                            <th class="text-center">CPU核</th>
                            <th class="text-center">1分钟负载</th>
                            <th class="text-center">5分钟负载</th>
                            <th class="text-center">15分钟负载</th>
                            <th class="text-center">总内存</th>
                            <th class="text-center">已用内存</th>
                            <th class="text-center">内存使用率</th>
                            <th class="text-center">使用率峰值</th>
                            <th class="text-center">总交换内存</th>
                            <th class="text-center">已用交换内存</th>
                            <th class="text-center">交换内存使用率</th>
                            <th class="text-center">根磁盘空间</th>
                            <th class="text-center">根磁盘使用率</th>
                            <th class="text-center">DATA磁盘空间</th>
                            <th class="text-center">DATA磁盘使用率</th>
                            <th class="text-center">备注</th>
                          </thead>
                          <tbody>
{#                            {% autopaginate report_info %}#}
                            {% for num in report_info %}
                              <tr class="text-center">
                                <td>{{num.project.name}}</td>
                                <td>{{num.p_ip}}</td>
                                <td>{{num.s_ip}}</td>
                                <td>{{num.cputotal}}</td>
                                <td>{{num.load_1}}</td>
                                <td>{{num.load_5}}</td>
                                <td>{{num.load_15}}</td>
                                <td>{{num.memtotal}}</td>
                                <td>{{num.memused}}</td>
                                <td>{{num.p_ip|avg_mem_use}}%</td>
                                <td>{{num.p_ip|top_mem_use}}%</td>
                                <td>{{num.swaptotal}}</td>
                                <td>{{num.swapused}}</td>
                                <td>{{num.swapuseprecent}}%</td>
                                <td>{{num.disk_root_sise}}</td>
                                <td>{{num.disk_root_useprecent}}%</td>
                                <td>{{num.disk_data_size}}</td>
                                <td>{{num.disk_data_useprecent}}%</td>
                                <td>{{num.remarks}}</td>
                              </tr>
                            {% endfor %}
                          </tbody>
                    </table>

                    <div class="row parent-pagination" style="padding: 0px 18px;">
                            <div class="pull-left">
                                <input id="checkall" type="checkbox" class="i-checks" name="checkall" value="checkall" data-editable='false' onclick="check_all('contents_form')">全选/全不选
                            </div>
{#                          <!--  {% paginate %} -->#}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.tableTools.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
            $('.dataTables-example').dataTable({
                responsive: true,
                "dom": 'T<"clear">lfrtip',
                "iDisplayLength":10,
                //"bPaginate": false,
                "info": false,
                //"searching": false,
                "tableTools": {
                    "aButtons":["copy","xls",'print'],
                    "sSwfPath": "/static/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                }
            });
        });

</script>

{%endblock%}